<template>
    <div id="sourceLineChart" class="h-400px">

    </div>
</template>

<script setup lang="ts">
import * as echarts from 'echarts'
import { ISourceLineChart } from '@/api/sem/types'

const props = defineProps<{
    LineChartData: ISourceLineChart
}>()

watch(() => props.LineChartData, (newVal) => {
    const chartDom = document.getElementById("sourceLineChart");
    if (chartDom == null) {
        return;
    }
    let myChart = echarts.getInstanceByDom(chartDom);
    // 如果不存在，就进行初始化
    if (myChart == null) {
        myChart = echarts.init(chartDom);
    }

    let option;
    let array = [] as any
    let array2 = <string[]>[]
    let array3 = <string[]>[]
    if (newVal.series) {
        props.LineChartData.series.forEach((item: any) => {
            array.push({
                type: item.type,
                name: item.name,
                stack: 'Total',
                data: item.data,
                smooth: true
            })
            array2.push(item.name)
            array3 = props.LineChartData.LineChart_X
        })
    } else {
        array = []
        array2 = []
        array3 = []
    }

    option = {
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            bottom: '0',
            left: 'center',
            orient: 'horizontal',
            data: array2
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '12%',
            containLabel: true
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: array3
        },
        yAxis: {
            type: 'value'
        },
        series: array
    };

    option && myChart.setOption(option);
})

</script>

<style scoped></style>